<script setup>
import { AntdIcon } from '@/library/AntdIcon'
import { ref, reactive, inject } from 'vue'
const searchHandleEvent = inject('searchHandleEventPort')
const toggleExpand = ref(0)
const props = defineProps({
  noneFields: { type: [Array, Object], default: () => [] },
  moreFields: { type: [Array, Object], default: () => [] },
})
// 会
const formRef = ref()
const formState = reactive({})
const onFinish = values => {
  // console.log('Received values of form: ', JSON.stringify(values))
  // console.log('formState: ', formState)
  searchHandleEvent(values)
}
</script>
<template>
  <a-card
    :bordered="false"
    class="always-shadow"
  >
    <a-form
      ref="formRef"
      name="advanced_search"
      :model="formState"
      @finish="onFinish"
    >
      <a-row :gutter="[8,8]">
        <template v-for="(item) in props.noneFields" :key="item.name">
          <a-col v-if="item.type == 'text'" :span="3">
            <a-form-item :name="`${item.name}`">
              <a-input v-model:value="formState[`${item.name}`]" :placeholder="item.placeholderText" />
            </a-form-item>
          </a-col>
          <a-col v-if="item.type == 'date'" :span="2">
            <a-form-item :name="`${item.name}`">
              <a-date-picker v-model:value="formState[`${item.name}`]" :placeholder="item.placeholderText" />
            </a-form-item>
          </a-col>
          <a-col v-if="item.type == 'time'" :span="2">
            <a-form-item :name="`${item.name}`">
              <a-time-picker v-model:value="formState[`${item.name}`]" :placeholder="item.placeholderText" />
            </a-form-item>
          </a-col>
          <a-col v-if="item.type == 'rangedate'" :span="4">
            <a-form-item :name="`${item.name}`">
              <a-range-picker v-model:value="formState[`${item.name}`]" :placeholder="[item.placeholderText+'开始', item.placeholderText+'结束']" />
            </a-form-item>
          </a-col>
          <a-col v-if="item.type == 'rangedatetime'" :span="6">
            <a-form-item :name="`${item.name}`">
              <a-range-picker v-model:value="formState[`${item.name}`]" show-time :placeholder="[item.placeholderText+'开始', item.placeholderText+'结束']" />
            </a-form-item>
          </a-col>
          <a-col v-if="item.type == 'rangeweek'" :span="4">
            <a-form-item :name="`${item.name}`">
              <a-range-picker v-model:value="formState[`${item.name}`]" picker="week" :placeholder="[item.placeholderText+'开始', item.placeholderText+'结束']" />
            </a-form-item>
          </a-col>
          <a-col v-if="item.type == 'rangemonth'" :span="4">
            <a-form-item :name="`${item.name}`">
              <a-range-picker v-model:value="formState[`${item.name}`]" picker="month" :placeholder="[item.placeholderText+'开始', item.placeholderText+'结束']" />
            </a-form-item>
          </a-col>
          <a-col v-if="item.type == 'rangeyear'" :span="3">
            <a-form-item :name="`${item.name}`">
              <a-range-picker v-model:value="formState[`${item.name}`]" picker="year" :placeholder="[item.placeholderText+'开始', item.placeholderText+'结束']" />
            </a-form-item>
          </a-col>
          <a-col v-if="item.type == 'select'" :span="3">
            <a-form-item :name="`${item.name}`">
              <a-select v-model:value="formState[`${item.name}`]" :placeholder="item.placeholderText" :allow-clear="true" :options="item.options" />
            </a-form-item>
          </a-col>
        </template>
        <template v-if="toggleExpand">
          <template v-for="(item) in props.moreFields" :key="item.name">
            <a-col v-if="item.type == 'text'" :span="3">
              <a-form-item :name="`${item.name}`">
                <a-input v-model:value="formState[`${item.name}`]" :placeholder="item.placeholderText" />
              </a-form-item>
            </a-col>
            <a-col v-if="item.type == 'date'" :span="2">
              <a-form-item :name="`${item.name}`">
                <a-date-picker v-model:value="formState[`${item.name}`]" :placeholder="item.placeholderText" />
              </a-form-item>
            </a-col>
            <a-col v-if="item.type == 'time'" :span="2">
              <a-form-item :name="`${item.name}`">
                <a-time-picker v-model:value="formState[`${item.name}`]" :placeholder="item.placeholderText" />
              </a-form-item>
            </a-col>
            <a-col v-if="item.type == 'rangedate'" :span="4">
              <a-form-item :name="`${item.name}`">
                <a-range-picker v-model:value="formState[`${item.name}`]" :placeholder="[item.placeholderText+'开始', item.placeholderText+'结束']" />
              </a-form-item>
            </a-col>
            <a-col v-if="item.type == 'rangedatetime'" :span="6">
              <a-form-item :name="`${item.name}`">
                <a-range-picker v-model:value="formState[`${item.name}`]" show-time :placeholder="[item.placeholderText+'开始', item.placeholderText+'结束']" />
              </a-form-item>
            </a-col>
            <a-col v-if="item.type == 'rangeweek'" :span="4">
              <a-form-item :name="`${item.name}`">
                <a-range-picker v-model:value="formState[`${item.name}`]" picker="week" :placeholder="[item.placeholderText+'开始', item.placeholderText+'结束']" />
              </a-form-item>
            </a-col>
            <a-col v-if="item.type == 'rangemonth'" :span="4">
              <a-form-item :name="`${item.name}`">
                <a-range-picker v-model:value="formState[`${item.name}`]" picker="month" :placeholder="[item.placeholderText]" />
              </a-form-item>
            </a-col>
            <a-col v-if="item.type == 'rangeyear'" :span="3">
              <a-form-item :name="`${item.name}`">
                <a-range-picker v-model:value="formState[`${item.name}`]" picker="year" :placeholder="[item.placeholderText, item.placeholderText+'结束']" />
              </a-form-item>
            </a-col>
            <a-col v-if="item.type == 'select'" :span="3">
              <a-form-item :name="`${item.name}`">
                <a-select v-model:value="formState[`${item.name}`]" :placeholder="item.placeholderText" :allow-clear="true" :options="item.options" />
              </a-form-item>
            </a-col>
          </template>
        </template>
      </a-row>
      <a-row>
        <a-col :span="24">

          <a-button type="primary" html-type="submit">
            <template #icon><AntdIcon icon="SearchOutlined" /></template>
            搜索
          </a-button>
          <a-button style="margin: 0 8px" @click="() => formRef.resetFields()">重置</a-button>
          <a-button v-if="props.moreFields.length > 1" type="link" shape="circle" @click="toggleExpand=!toggleExpand">
            <AntdIcon v-if="toggleExpand" icon="UpOutlined" />
            <AntdIcon v-else icon="DownOutlined" />
          </a-button>

        </a-col>
      </a-row>
    </a-form>
  </a-card>
</template>
<style lang="less" scoped>
.ant-form-item {
  margin-bottom: 2px ;
}
</style>